// JavaScript Document
Ext.setup({
    tabletStartupScreen: 'image/tablet_startup.png',
    phoneStartupScreen: 'image/phone_startup.png',
    icon: 'image/icon.png',
    glossOnIcon: false,
    onReady: function() {
        var panel, tweetPanel, itineraryPanel, tabBar, refresh1;
		
// panel for displaying tweets
		tweetPanel = new Ext.Component({
			title:"Tweets",
			scroll: 'vertical',
			tpl:[ // tempalte for displaying tweets
	            '<div id="tweet_container">',
                    '<tpl for=".">',
                        '<div class="tweet_data">',
                        '<div class="tweet_avatar">',
                            '<img width="30" height="30" src="{profile_image_url}"/>',
                        '</div>',
                        '<div class="tweet_content">',
                            '<a class="user" href="http://twitter.com/{from_user}">{from_user}</a>&nbsp;',
                            '{text}',
                        '</div>',
                        '<div class="clear"></div>',
                        '</div>',
                    '</tpl>',
                '</div>'
			]
		});
		
		// update the tweets on twitter panel
		refresh_tweet = function(){
			Ext.util.JSONP.request({
				url: 'http://search.twitter.com/search.json',
				callbackKey: 'callback',
				params: {
					q: "airport",
					rpp: 7
				},
				callback: function(data){
					var tweetList = data.results;
					tweetPanel.update(tweetList); 
				}
			});
		}
		
		refresh_tweet();
		
// panel for displaying itinerary
		/*
		itineraryPanel = {
			title:"Itinerary",
			html:"itinerary text"
		}*/
			itineraryPanel = new Ext.Component({
			title:"Itinerary",
			scroll: 'vertical',
			tpl:[
	            '<div id="touchpoint_container">',
                    '<tpl for=".">',
                        '<div class="touchpoint_data">',
                        '<div class="touchpoint_icon">',
                            '<img width="30" height="30" src="{touchpoint_image_url}"/>',
                        '</div>',
                        '<div class="touchpoint_content">',
                            '<h3 class="touchpoint">{touchpoint}</h3>',
                            '{text}',
                        '</div>',
                        '<div class="clear"></div>',
                        '</div>',
                    '</tpl>',
                '</div>'
			]
		});
		
			
		// update the touchpoint info in itinerary panel
		refresh_itinerary = function(){
			var tp_checkin = {
				text: "counter #5",
				touchpoint: "Check in",
				//touchpoint_image_url: "http://www.algarve-information.com/algarve/images/SpecialOffers/algarveBeach.jpg"
				touchpoint_image_url: "http://www.allthingschristmas.com/pics1/santa-claus-clothing1.jpg"
			};
			
			var tp_security = {
				text: "please go to priority line",
				touchpoint: "Security",
				touchpoint_image_url: "http://www.algarve-information.com/algarve/images/SpecialOffers/algarveBeach.jpg"
			};
			
			var tp_customs = {
				text: "go to line 3",
				touchpoint: "Customs",
				touchpoint_image_url: "http://www.allthingschristmas.com/pics1/santa-claus-clothing1.jpg"
			};
			
			var tp_waiting = {
				text: "you have 30 min of free time",
				touchpoint: "Free time",
				touchpoint_image_url: "http://www.algarve-information.com/algarve/images/SpecialOffers/algarveBeach.jpg"
			};
				
			var tp_gate = {
				text: "gate #50",
				touchpoint: "Boarding Gate",
				touchpoint_image_url: "http://www.allthingschristmas.com/pics1/santa-claus-clothing1.jpg"
			};
				
			var tpList = [tp_checkin,tp_security, tp_customs, tp_waiting, tp_gate]
			itineraryPanel.update(tpList); 
		}
		
		refresh_itinerary();
		
// tab panel for switching between views
		panel = new Ext.TabPanel({
			fullscreen: true,
			animation: 'slide',
			items:[tweetPanel, itineraryPanel]}
		);
    }
});
